
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: TabView: Adding and Removing Tabs</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style id="yui3-style-overrides">
.yui3-tabview {
    margin-bottom: 1em;
}

.yui3-skin-sam .yui3-tab {
    position: relative;
}

.yui3-skin-sam .yui3-tabview-removeable .yui3-tab-label,
.yui3-skin-sam .yui3-tabview-removeable .yui3-tab-selected .yui3-tab-label {
    padding-right: 1.3em; /* make room for close link */
}

.yui3-skin-sam .yui3-tabview-removeable .yui3-tab-add {
    padding-right: 0.75em; /* no close link for add tab link */
}

.yui3-skin-sam .yui3-tab-add {
    color: #999;
    font: bold 120%/1 verdana;
    margin-left: 0.25em;
}

.yui3-tab-remove {
    color: #999;
    font:bold 80% verdana;
    position: absolute;
    right: 0.4em;
    top: 0.4em;
}

.yui3-tab-remove:hover {
    color: #666;
}

.yui3-skin-sam .yui3-tab-selected .yui3-tab-remove {
    top: 0.52em;
}

.yui3-skin-sam .yui3-tab-selected .yui3-tab-remove:hover {
    color: #fff;
}

#main #example-canvas .yui3-tabview .yui3-tab-selected a {
	color:white;
}

</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: TabView: Adding and Removing Tabs</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>TabView: Adding and Removing Tabs</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	This example shows how to give <code>TabView</code> buttons for adding and removing tabs.
	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="tabview-add-remove_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	
<div id="demo">
    <ul>
        <li><a href="#foo">foo</a></li>
        <li><a href="#bar">bar</a></li>
        <li><a href="#baz">baz</a></li>
    </ul>
    <div>
        <div id="foo">
            <p>foo content</p>
        </div>
        <div id="bar">
            <p>bar content</p>
        </div>
        <div id="baz">
            <p>baz content</p>
        </div>
    </div>
</div>

<div id="demo2">
</div>

<div id="demo3">
</div>
<script type="text/javascript">
YUI({insertBefore: 'yui3-style-overrides', filter: 'raw'}).use("yui", "tabview", "plugin", function(Y) {
    var Addable = function(config) {
        Addable.superclass.constructor.apply(this, arguments);
    };

    Addable.NAME = 'addableTabs';
    Addable.NS = 'addable';

    Y.extend(Addable, Y.Plugin.Base, {
        ADD_TEMPLATE: '<li class="yui3-tab" title="add a tab">' +
                    '<a class="yui3-tab-label yui3-tab-add">+</a></li>',

        initializer: function(config) {
            var tabview = this.get('host');
            tabview.after('render', this.afterRender, this);
            tabview.get('contentBox')
                .delegate('click', this.onAddClick, '.yui3-tab-add', this);
        },

        getTabInput: function() {
            var tabview = this.get('host');
            return {
                label: window.prompt('label:', 'new tab'),
                content: window.prompt('content:', '<p>new content</p>'),
                index: Number(window.prompt('index:', tabview.size()))
            }
        },

        afterRender: function(e) {
            var tabview = this.get('host');
            tabview.get('contentBox').one('> ul').append(this.ADD_TEMPLATE);
        },

        onAddClick: function(e) {
            e.stopPropagation();
            var tabview = this.get('host'),
                input = this.getTabInput();
            tabview.add(input, input.index);
        }
    });

    var Removeable = function(config) {
        Removeable.superclass.constructor.apply(this, arguments);
    };

    Removeable.NAME = 'removeableTabs';
    Removeable.NS = 'removeable';

    Y.extend(Removeable, Y.Plugin.Base, {
        REMOVE_TEMPLATE: '<a class="yui3-tab-remove" title="remove tab">x</a>',

        initializer: function(config) {
            var tabview = this.get('host'),
                cb = tabview.get('contentBox');

            cb.addClass('yui3-tabview-removeable');
            cb.delegate('click', this.onRemoveClick, '.yui3-tab-remove', this);

            // Tab events bubble to TabView
            tabview.after('tab:render', this.afterTabRender, this);
        },

        afterTabRender: function(e) {
            // boundingBox is the Tab's LI
            e.target.get('boundingBox').append(this.REMOVE_TEMPLATE);
        },

        onRemoveClick: function(e) {
            e.stopPropagation();
            var tab = Y.Widget.getByNode(e.target);
            tab.remove();
        }
    });

    var tabview = new Y.TabView({
        srcNode: '#demo',
        plugins: [Addable]
    });

    var tabview2 = new Y.TabView({
        children: [{
            label: 'foo',
            content: '<p>foo content</p>'
        }, {
            label: 'bar',
            content: '<p>bar content</p>'
        }, {
            label: 'baz',
            content: '<p>baz content</p>'
        }],
        plugins: [Removeable]
    });

    var tabview3 = new Y.TabView({
        children: [{
            label: 'foo',
            content: '<p>foo content</p>'
        }, {
            label: 'bar',
            content: '<p>bar content</p>'
        }, {
            label: 'baz',
            content: '<p>bar content</p>'
        }],
        plugins: [Addable, Removeable]
    });

    tabview.render();
    tabview2.render('#demo2');
    tabview3.render('#demo3');
});
</script>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h3>Plugin Template</h3>

<p>In order to make these addons reusable, we can build them as plugins.  This
allows the option for multiple tabviews that mix and match functionality.
To get started, we will first fill in a basic <code>Plugin</code> template.
The <code>NAME</code> property is required to prefix events, classNames, et cetera.
The <code>NS</code> is the namespace where the plugin will live on the
<code>host</code>.  This is where its API can be accessed (e.g. "node.addable.destroy()").
Adding the <code>this._host</code> alias provides a convenient way to get back to the TabView
instance. Calling the superclass constructor kicks off the <code>Base</code> lifecycle,
which will call the <code>initializer</code>.

</p>
<div id="syntax-e69393f5cccff988f64cc0fe30e80c38" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> Addable <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">this</span>._host <span class="sy0">=</span> config.<span class="me1">host</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    Addable.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">&#40;</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">Addable.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">'addableTabs'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Addable.<span class="me1">NS</span> <span class="sy0">=</span> <span class="st0">'addable'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">Y.<span class="me1">extend</span><span class="br0">&#40;</span>Addable<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">Base</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> Addable <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw1">this</span>._host <span class="sy0">=</span> config.<span class="me1">host</span><span class="sy0">;</span>
    Addable.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">&#40;</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
Addable.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">'addableTabs'</span><span class="sy0">;</span>
Addable.<span class="me1">NS</span> <span class="sy0">=</span> <span class="st0">'addable'</span><span class="sy0">;</span>
&nbsp;
Y.<span class="me1">extend</span><span class="br0">&#40;</span>Addable<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">Base</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-e69393f5cccff988f64cc0fe30e80c38-plain">var Addable = function(config) {
    this._host = config.host;
    Addable.superclass.constructor.apply(this, arguments);
};

Addable.NAME = 'addableTabs';
Addable.NS = 'addable';

Y.extend(Addable, Y.Plugin.Base, {
    initializer: function(config) {
    }
});
</textarea></div>
<h3>Addable Tab Plugin</h3>

<p>To simplify adding new tabs, we are going to add a button that
users can click and that will prompt them for some details regarding the new tab.
The main task we are trying to accomplish is to add some HTML to the
<code>TabView</code>, listen for clicks on the button, prompt the user for input,
and update the tabs accordingly.</p>

<h4>HTML Template</h4>
<p>The first thing we need is a template for the markup to be generated.  Adding
this to the prototype allows separate customization for each <code>TabView</code>
instance. For this example, we want it to look and feel like another <code>Tab</code>
without actually being one.</p> 

<div id="syntax-a7b4cfddc7d70408f2390e7abdc1ad8e" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">extend</span><span class="br0">&#40;</span>Addable<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">Base</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    ADD_TEMPLATE<span class="sy0">:</span> <span class="st0">'&lt;li class=&quot;yui3-tab&quot; title=&quot;add a tab&quot;&gt;'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">                <span class="st0">'&lt;a class=&quot;yui3-tab-label yui3-tab-add&quot;&gt;+&lt;/a&gt;&lt;/li&gt;'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">extend</span><span class="br0">&#40;</span>Addable<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">Base</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    ADD_TEMPLATE<span class="sy0">:</span> <span class="st0">'&lt;li class=&quot;yui3-tab&quot; title=&quot;add a tab&quot;&gt;'</span> <span class="sy0">+</span>
                <span class="st0">'&lt;a class=&quot;yui3-tab-label yui3-tab-add&quot;&gt;+&lt;/a&gt;&lt;/li&gt;'</span><span class="sy0">,</span>
&nbsp;
    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-a7b4cfddc7d70408f2390e7abdc1ad8e-plain">Y.extend(Addable, Y.Plugin.Base, {
    ADD_TEMPLATE: '<li class="yui3-tab" title="add a tab">' +
                '<a class="yui3-tab-label yui3-tab-add">+</a></li>',

    initializer: function(config) {
    }
});
</textarea></div>
<h4>Adding the HTML</h4>
<p>Now that we have a markup template, we will need to add it to the <code>TabView</code>
somehow.  The <code>render</code> phase is the appropriate moment to do so.  Listening
for the <code>render</code> event will give us access to that moment.  Listening
for <code>after('render')</code> ensure that the rendering has actually happened. Then
we just need to find the tab list and, using the template, add the new item.
The <code>contentBox</code> provides a <code>Node</code> that can be used to manage
the <code>TabView</code> HTML.</p> 

<div id="syntax-71833ed65c84053c749ad4f813478850" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">extend</span><span class="br0">&#40;</span>Addable<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">Base</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    ADD_TEMPLATE<span class="sy0">:</span> <span class="st0">'&lt;li class=&quot;yui3-tab&quot; title=&quot;add a tab&quot;&gt;'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">                <span class="st0">'&lt;a class=&quot;yui3-tab-label yui3-tab-add&quot;&gt;+&lt;/a&gt;&lt;/li&gt;'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        tabview.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'render'</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">afterRender</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    afterRender<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        tabview.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'contentBox'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'&gt; ul'</span><span class="br0">&#41;</span>.<span class="me1">append</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">ADD_TEMPLATE</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">extend</span><span class="br0">&#40;</span>Addable<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">Base</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    ADD_TEMPLATE<span class="sy0">:</span> <span class="st0">'&lt;li class=&quot;yui3-tab&quot; title=&quot;add a tab&quot;&gt;'</span> <span class="sy0">+</span>
                <span class="st0">'&lt;a class=&quot;yui3-tab-label yui3-tab-add&quot;&gt;+&lt;/a&gt;&lt;/li&gt;'</span><span class="sy0">,</span>
&nbsp;
    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        tabview.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'render'</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">afterRender</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
    afterRender<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        tabview.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'contentBox'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'&gt; ul'</span><span class="br0">&#41;</span>.<span class="me1">append</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">ADD_TEMPLATE</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-71833ed65c84053c749ad4f813478850-plain">Y.extend(Addable, Y.Plugin.Base, {
    ADD_TEMPLATE: '<li class="yui3-tab" title="add a tab">' +
                '<a class="yui3-tab-label yui3-tab-add">+</a></li>',

    initializer: function(config) {
        var tabview = this.get('host');
        tabview.after('render', this.afterRender, this);
    },

    afterRender: function(e) {
        var tabview = this.get('host');
        tabview.get('contentBox').one('> ul').append(this.ADD_TEMPLATE);
    }
});
</textarea></div>
<h4>Handling the Click</h4>
<p>All that remains is to listen for clicks on the add button and prompt
the user for the relevant <code>Tab</code> data.  Again we can leverage
the <code>Node</code> API, this time to delegate clicks on the add button.
Stopping event propagation in our handler ensures that the event does
not bubble any further, preventing the <code>TabView</code> from trying
to handle it. To keep the example simple, a basic <code>prompt</code> is
used to get the user input.  This could be refined to use an
<code>Overlay</code> or other custom control.  The data is then handed off
to <code>TabView</code>'s <code>add</code> method.</p> 

<div id="syntax-04ab31a0aecf4513eecb62c5f302a49b" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">extend</span><span class="br0">&#40;</span>Addable<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">Base</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    ADD_TEMPLATE<span class="sy0">:</span> <span class="st0">'&lt;li class=&quot;yui3-tab&quot; title=&quot;add a tab&quot;&gt;'</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1">                <span class="st0">'&lt;a class=&quot;yui3-tab-label yui3-tab-add&quot;&gt;+&lt;/a&gt;&lt;/li&gt;'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        tabview.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'render'</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">afterRender</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        tabview.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'contentBox'</span><span class="br0">&#41;</span></div></li><li class="li2"><div class="de2">            .<span class="me1">delegate</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">onAddClick</span><span class="sy0">,</span> <span class="st0">'.yui3-tab-add'</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    afterRender<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'contentBox'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'&gt; ul'</span><span class="br0">&#41;</span>.<span class="me1">append</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">ADD_TEMPLATE</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    getTabInput<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">return</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            label<span class="sy0">:</span> window.<span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">'label:'</span><span class="sy0">,</span> <span class="st0">'new tab'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            content<span class="sy0">:</span> window.<span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">'content:'</span><span class="sy0">,</span> <span class="st0">'&lt;p&gt;new content&lt;/p&gt;'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            index<span class="sy0">:</span> Number<span class="br0">&#40;</span>window.<span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">'index:'</span><span class="sy0">,</span> <span class="kw1">this</span>._host.<span class="me1">size</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    onAddClick<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        e.<span class="me1">stopPropagation</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            input <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">getTabInput</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        tabview.<span class="me1">add</span><span class="br0">&#40;</span>input<span class="sy0">,</span> input.<span class="me1">index</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">extend</span><span class="br0">&#40;</span>Addable<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">Base</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    ADD_TEMPLATE<span class="sy0">:</span> <span class="st0">'&lt;li class=&quot;yui3-tab&quot; title=&quot;add a tab&quot;&gt;'</span> <span class="sy0">+</span>
                <span class="st0">'&lt;a class=&quot;yui3-tab-label yui3-tab-add&quot;&gt;+&lt;/a&gt;&lt;/li&gt;'</span><span class="sy0">,</span>
&nbsp;
    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        tabview.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'render'</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">afterRender</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        tabview.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'contentBox'</span><span class="br0">&#41;</span>
            .<span class="me1">delegate</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">onAddClick</span><span class="sy0">,</span> <span class="st0">'.yui3-tab-add'</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
    afterRender<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'contentBox'</span><span class="br0">&#41;</span>.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'&gt; ul'</span><span class="br0">&#41;</span>.<span class="me1">append</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">ADD_TEMPLATE</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
    getTabInput<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw1">return</span> <span class="br0">&#123;</span>
            label<span class="sy0">:</span> window.<span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">'label:'</span><span class="sy0">,</span> <span class="st0">'new tab'</span><span class="br0">&#41;</span><span class="sy0">,</span>
            content<span class="sy0">:</span> window.<span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">'content:'</span><span class="sy0">,</span> <span class="st0">'&lt;p&gt;new content&lt;/p&gt;'</span><span class="br0">&#41;</span><span class="sy0">,</span>
            index<span class="sy0">:</span> Number<span class="br0">&#40;</span>window.<span class="kw3">prompt</span><span class="br0">&#40;</span><span class="st0">'index:'</span><span class="sy0">,</span> <span class="kw1">this</span>._host.<span class="me1">size</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
    onAddClick<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        e.<span class="me1">stopPropagation</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span><span class="sy0">;</span>
            input <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">getTabInput</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        tabview.<span class="me1">add</span><span class="br0">&#40;</span>input<span class="sy0">,</span> input.<span class="me1">index</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-04ab31a0aecf4513eecb62c5f302a49b-plain">Y.extend(Addable, Y.Plugin.Base, {
    ADD_TEMPLATE: '<li class="yui3-tab" title="add a tab">' +
                '<a class="yui3-tab-label yui3-tab-add">+</a></li>',

    initializer: function(config) {
        var tabview = this.get('host');
        tabview.after('render', this.afterRender, this);

        tabview.get('contentBox')
            .delegate('click', this.onAddClick, '.yui3-tab-add', this);
    },

    afterRender: function(e) {
        this.get('host').get('contentBox').one('> ul').append(this.ADD_TEMPLATE);
    },

    getTabInput: function() {
        return {
            label: window.prompt('label:', 'new tab'),
            content: window.prompt('content:', '<p>new content</p>'),
            index: Number(window.prompt('index:', this._host.size()))
        }
    },

    onAddClick: function(e) {
        e.stopPropagation();
        var tabview = this.get('host');
            input = this.getTabInput();
        tabview.add(input, input.index);
    }
});
</textarea></div>
<h4>Using the Plugin</h4>
<p>Now we can go ahead and plug in our functionality.  This can be during
construction with the <code>plugins</code> attribute, or subsequently
via the <code>plug</code> method.</p> 

<div id="syntax-a7de8f73d12b1aae43fceba94c84d18f" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">TabView</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    children<span class="sy0">:</span> <span class="br0">&#91;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        label<span class="sy0">:</span> <span class="st0">'foo'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        content<span class="sy0">:</span> <span class="st0">'&lt;p&gt;foo content&lt;/p&gt;'</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        label<span class="sy0">:</span> <span class="st0">'bar'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        content<span class="sy0">:</span> <span class="st0">'&lt;p&gt;bar content&lt;/p&gt;'</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        label<span class="sy0">:</span> <span class="st0">'baz'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        content<span class="sy0">:</span> <span class="st0">'&lt;p&gt;baz content&lt;/p&gt;'</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    plugins<span class="sy0">:</span> <span class="br0">&#91;</span>Addable<span class="br0">&#93;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2"><span class="co1">// or</span></div></li><li class="li1"><div class="de1"><span class="co1">// tabview.plug(Addable);</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">TabView</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    children<span class="sy0">:</span> <span class="br0">&#91;</span><span class="br0">&#123;</span>
        label<span class="sy0">:</span> <span class="st0">'foo'</span><span class="sy0">,</span>
        content<span class="sy0">:</span> <span class="st0">'&lt;p&gt;foo content&lt;/p&gt;'</span>
    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="br0">&#123;</span>
        label<span class="sy0">:</span> <span class="st0">'bar'</span><span class="sy0">,</span>
        content<span class="sy0">:</span> <span class="st0">'&lt;p&gt;bar content&lt;/p&gt;'</span>
    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="br0">&#123;</span>
        label<span class="sy0">:</span> <span class="st0">'baz'</span><span class="sy0">,</span>
        content<span class="sy0">:</span> <span class="st0">'&lt;p&gt;baz content&lt;/p&gt;'</span>
    <span class="br0">&#125;</span><span class="br0">&#93;</span><span class="sy0">,</span>
    plugins<span class="sy0">:</span> <span class="br0">&#91;</span>Addable<span class="br0">&#93;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// or</span>
<span class="co1">// tabview.plug(Addable);</span>
&nbsp;</pre></div><textarea id="syntax-a7de8f73d12b1aae43fceba94c84d18f-plain">var tabview = new Y.TabView({
    children: [{
        label: 'foo',
        content: '<p>foo content</p>'
    }, {
        label: 'bar',
        content: '<p>bar content</p>'
    }, {
        label: 'baz',
        content: '<p>baz content</p>'
    }],
    plugins: [Addable]
});

// or
// tabview.plug(Addable);
</textarea></div>
<h3>Removeable Tabs Plugin</h3>
<p>The process for creating a removeable plugin for <code>TabView</code>
is very similar.  The full source is provided below.</p>
<div id="syntax-685dfc3a07e6516071d1b736995b281d" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> Removeable <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    Removeable.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">&#40;</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">Removeable.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">'removeableTabs'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Removeable.<span class="me1">NS</span> <span class="sy0">=</span> <span class="st0">'removeable'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">Y.<span class="me1">extend</span><span class="br0">&#40;</span>Removeable<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">Base</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    REMOVE_TEMPLATE<span class="sy0">:</span> <span class="st0">'&lt;a class=&quot;yui3-tab-remove&quot; title=&quot;remove tab&quot;&gt;x&lt;/a&gt;'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            cb <span class="sy0">=</span> tabview.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'contentBox'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">        cb.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'yui3-tabview-removeable'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        cb.<span class="me1">delegate</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">onRemoveClick</span><span class="sy0">,</span> <span class="st0">'.yui3-tab-remove'</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">// Tab events bubble to TabView</span></div></li><li class="li1"><div class="de1">        tabview.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'tab:render'</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">afterTabRender</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    afterTabRender<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">// boundingBox is the Tab's LI</span></div></li><li class="li1"><div class="de1">        e.<span class="me1">target</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'boundingBox'</span><span class="br0">&#41;</span>.<span class="me1">append</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">REMOVE_TEMPLATE</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    onRemoveClick<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        e.<span class="me1">stopPropagation</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> tab <span class="sy0">=</span> Y.<span class="me1">Widget</span>.<span class="me1">getByNode</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        tab.<span class="me1">remove</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> Removeable <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    Removeable.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">&#40;</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
Removeable.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">'removeableTabs'</span><span class="sy0">;</span>
Removeable.<span class="me1">NS</span> <span class="sy0">=</span> <span class="st0">'removeable'</span><span class="sy0">;</span>
&nbsp;
Y.<span class="me1">extend</span><span class="br0">&#40;</span>Removeable<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">Base</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    REMOVE_TEMPLATE<span class="sy0">:</span> <span class="st0">'&lt;a class=&quot;yui3-tab-remove&quot; title=&quot;remove tab&quot;&gt;x&lt;/a&gt;'</span><span class="sy0">,</span>
&nbsp;
    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> tabview <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'host'</span><span class="br0">&#41;</span><span class="sy0">,</span>
            cb <span class="sy0">=</span> tabview.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'contentBox'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        cb.<span class="me1">addClass</span><span class="br0">&#40;</span><span class="st0">'yui3-tabview-removeable'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        cb.<span class="me1">delegate</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">onRemoveClick</span><span class="sy0">,</span> <span class="st0">'.yui3-tab-remove'</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">// Tab events bubble to TabView</span>
        tabview.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'tab:render'</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">afterTabRender</span><span class="sy0">,</span> <span class="kw1">this</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
    afterTabRender<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">// boundingBox is the Tab's LI</span>
        e.<span class="me1">target</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'boundingBox'</span><span class="br0">&#41;</span>.<span class="me1">append</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">REMOVE_TEMPLATE</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
    onRemoveClick<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        e.<span class="me1">stopPropagation</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="kw2">var</span> tab <span class="sy0">=</span> Y.<span class="me1">Widget</span>.<span class="me1">getByNode</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span><span class="sy0">;</span>
        tab.<span class="me1">remove</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-685dfc3a07e6516071d1b736995b281d-plain">var Removeable = function(config) {
    Removeable.superclass.constructor.apply(this, arguments);
};

Removeable.NAME = 'removeableTabs';
Removeable.NS = 'removeable';

Y.extend(Removeable, Y.Plugin.Base, {
    REMOVE_TEMPLATE: '<a class="yui3-tab-remove" title="remove tab">x</a>',

    initializer: function(config) {
        var tabview = this.get('host'),
            cb = tabview.get('contentBox');

        cb.addClass('yui3-tabview-removeable');
        cb.delegate('click', this.onRemoveClick, '.yui3-tab-remove', this);

        // Tab events bubble to TabView
        tabview.after('tab:render', this.afterTabRender, this);
    },

    afterTabRender: function(e) {
        // boundingBox is the Tab's LI
        e.target.get('boundingBox').append(this.REMOVE_TEMPLATE);
    },

    onRemoveClick: function(e) {
        e.stopPropagation();
        var tab = Y.Widget.getByNode(e.target);
        tab.remove();
    }
});</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    TabView Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../tabview/tabview-basic.html'>TabView from Existing Markup</a></li><li><a href='../tabview/tabview-fromjs.html'>Dynamic TabView from JavaScript</a></li><li class='selected'><a href='../tabview/tabview-add-remove.html'>Adding and Removing Tabs</a></li><li><a href='../tabview/tabview-io.html'>Loading Tab Content</a></li><li><a href='../history/history_tabview.html'>History + TabView (included with examples for History)</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More TabView Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/tabview/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_tabview.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
